<!--nuc心跳-->
<template>
  <div class="log">
    <basic-container>
      <avue-crud
          ref="crud"
          :data="tableData"
          :option="tableOption"
          :page.sync="page"
          :table-loading="tableLoading"
          @search-reset="searchReset"
          @on-load="getList"
          @search-change="searchChange"
          @size-change="sizeChange"
          @current-change="currentChange">
        <template slot="status" slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" type="success">{{ scope.label }}</el-tag>
          <el-tag v-if="scope.row.status === 1" type="danger">{{ scope.label }}</el-tag>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import {heartObj} from '@/api/nuc/index'
import {mapGetters} from 'vuex'
import {PASS_STATE} from '@/const/Dict'


export default {
  name: "heart",
  data() {
    return {
      polling: null,
      tableData: [],
      searchForm: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableLoading: true,
       tableOption : {
        border: true,  //竖线边框
        index: true,  //表格序号
        indexLabel: '序号',  //序号的标题
        stripe: true,  //是否显示表格的斑马条纹
        align: 'center',  //表格列对其方式
        emptyBtnText:'重置', //清空按钮文案
        searchMenuSpan: 6,  //搜索框长度
        menu:false,   //是否显示操作栏
        props: {
          label: 'label',
          value: 'value'
        },
        column: [
          {
            label: 'nuc名称',
            prop: 'name',
            search: true,
          },{
            label: 'nuc-mac地址',
            prop: 'mac',
            search: true,
            searchLabelWidth:100,
          },{
            label: '最后心跳时间',
            prop: 'created',
          },{
            label: '状态',
            prop: 'status',
            type: 'select',
            search: true,
            slot:true,
            dicData:PASS_STATE,
            change: (value) => {
              if(value.value === ''){
                return;
              }
              this.searchForm.status = value.value
              this.getList(this.page, this.searchForm)
            },
          },
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  created () {
    this.pollData()
  },
  beforeDestroy () {
    clearInterval(this.polling)
  },
  methods: {
    //定时器
    pollData(){
      this.polling = setInterval(()=>{
        this.getList(this.page)
        console.log("刷新" + new Date());
      }, 5000)
    },

    //展示表格
    getList(page, params) {
      heartObj(Object.assign({
        current: page.currentPage,
        size: page.pageSize,
        descs: 'created',
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      })
    },

    //搜索页面内容
    searchChange(form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },

    //点击每页多少条会调size-change方法回调
    sizeChange(size) {
      this.page.pageSize = size
    },

    //点击页码会调用current-change方法回调当前页
    currentChange(current) {
      this.page.currentPage = current
    },

    //清空时重置页面
    searchReset(){
      this.page={};
      this.searchForm = 0;
      this.getList(this.page)
    }
  }
}
</script>
<style scoped>
/deep/.avue-crud__menu{
  display: none;
}
/deep/.el-form-item__label{
  text-align: left;
}
/deep/.avue-form__row{
  padding-left: 2px !important;
  padding-right: 36px!important;
}
/deep/.avue-form__menu--center{
  text-align: left;
}
/deep/.avue-form__menu--center .el-button{
  margin: 0 20px 0 0;
}
</style>